<template>
  <div class="GdwyyAppIncome">
    <GdwyyAppBigTitle title="收入" icon="收入" color="red" :time="queryParam.dayId"></GdwyyAppBigTitle>
    <van-loading v-if="loading" type="spinner" color="#1989fa" />
    <div class="main" v-else>
      <div class="content">
        <div class="top flex-center border-box">
          <div class="font-16 fill-w text-center">营服总收入</div>
          <div class="font-12 color999 flex-s-0">单位：万元</div>
        </div>
        <div class="middle flex-center">
          <div class="item" v-for="(item, index) in itemList" :key="index + 'item'">
            <div class="flex-center">
              <img class="icon" :src="require('../../../../assets/imgs/reconsitution/' + item.icon + '.png')" />
              <div class="font-15 color333">{{ item.title }}</div>
            </div>
            <div class="des font-12 color999 mgl-18">出账收入</div>
            <div class="mgl-18">
              <span class="font-20 main-red">{{ zlData[item.czsr] || 0 }}</span>
              <span class="font-12 color666 wcl">完成率:{{ zlData[item.wcl] || 0 }}%</span>
            </div>
          </div>
        </div>
        <div class="bottom flex-center flex-between">
          <div class="item flex-column" v-for="(item, index) in bottomList" :key="index + 'bottom'">
            <div class="flex-center mgb-12 top-icon">
              <img class="icon" :src="require('../../../../assets/imgs/reconsitution/' + item.icon + '.png')" />
              <div class="font-13 color333">{{ item.title }}</div>
            </div>
            <div class="flex-center flex-between" v-for="(ite, ind) in itemList" :key="ind + 'iteme'">
              <div class="title font-12 color999">{{ ite.title }}</div>
              <div class="font-15 color333">{{ otherData['income_' + ite.bottomModel + '_' + item.target] || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GdwyyAppBigTitle } from '@/components/reconsitution/index.js'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'

const _apiConfig = [
  {
    url: '8a31cdd68a7e768a018ac28aa18c0011',
    resultParamsName: 'zlData',
  },
  {
    url: '8a31cdd68a7e768a018ac28b555a0012',
    resultParamsName: 'otherData',
  },
]
export default {
  name: 'GdwyyAppIncome',
  mixins: [reconsitutionMixin],
  components: {
    GdwyyAppBigTitle,
  },
  data() {
    return {
      loading: false,
      queryParam: {
        gridId: '',
        dayId: '',
      },
      itemList: [
        {
          icon: 'sr_ywsj1',
          title: '移网手机',
          czsr: 'YWSJ_M_LJ_CZSR',
          wcl: 'YWSJ_M_CZSR_MB_WCL',

          bottomModel: 'yw',
        },
        {
          icon: 'sr_kd1',
          title: '宽带',
          czsr: 'KD_M_LJ_CZSR',
          wcl: 'KD_M_CZSR_MB_WCL',

          bottomModel: 'kd',
        },
      ],
      bottomList: [
        {
          icon: 'sr_yy',
          title: '营业',
          target: 'yy',
        },
        {
          icon: 'sr_zj',
          title: '智家',
          target: 'zj',
        },
        {
          icon: 'sr_sq',
          title: '社渠',
          target: 'sq',
        },
      ],
      zlData: {},
      otherData: {},
    }
  },

  // computed: {
  //   cacheGridId() {
  //     return this.$store.state.user.$gridId
  //   },
  // },

  // watch: {
  //   cacheGridId: {
  //     handler(nv) {
  //       console.warn('dd', nv)
  //       this.setAllRequest(_apiConfig, { ...this.queryParam, gridId: nv })
  //     },
  //   },
  // },

  created() {
    this.loading = true
    this.initData()
    const { setAllRequest, queryParam } = this

    function main(e) {
      // Check if the localStorage key that changed is the one we care about
      if (e.key === '$dialogFinish' && e.newValue) {
        // Do something with the updated value
        let newValue = e.newValue
        localStorage.setItem('$dialogFinish', '')
        setAllRequest(_apiConfig, { ...queryParam, gridId: localStorage.getItem('$gridId') })
        console.log('LocalStorage key "someKey" changed to ', newValue)
        // window.removeEventListener('storage', main)

      }
    }
    window.addEventListener('storage', main)
  },

  methods: {
    initDataPostHook(data) {
      this.setAllRequest(_apiConfig, this.queryParam)
      this.loading = false
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.GdwyyAppIncome {
  margin-bottom: 3.2vw;
  .main {
    padding: 0 4vw;
    box-sizing: border-box;
    background-color: #fff;
    padding-top: 3.2vw;
    padding-bottom: 3.2vw;
    .content {
      .bg('sr_card_bg.png');
      // width: 92vw;
      // height: 64vw;
      padding: 1.3333vw 2.9333vw 3.4667vw 2.9333vw;
      box-sizing: border-box;
    }
    .top {
      margin-bottom: 6.4vw;
    }
    .middle {
      border-bottom: 0.2667vw dotted rgba(253, 128, 110, 0.2);
      padding-bottom: 4.2667vw;
      margin-bottom: 4.2667vw;
      justify-content: space-between;
      .item {
        // width: 50%;
        box-sizing: border-box;
      }
      .icon {
        width: 4.8vw;
        height: 4.8vw;
        margin-right: 1.3333vw;
      }
      .des {
        margin-bottom: 1.6vw;
        margin-top: 0.5333vw;
      }
      .wcl {
        margin-left: 2.6667vw;
      }
    }
    .mgl-18 {
      margin-left: 4.8vw;
    }

    .bottom {
      box-sizing: border-box;
      .item {
        min-width: 25%;
        box-sizing: border-box;
      }
      .icon {
        width: 3.7333vw;
        height: 3.7333vw;
        margin-right: 1.0667vw;
      }
      .top-icon {
        align-self: center;
      }
    }
  }
}
</style>